<template>
    <div class="editor-container">
        <a-layout>
            <a-layout-header class="header" v-if="false">
                <div class="page-title">
                    <router-link to="/">
                        <img alt="慕课乐高" src="../assets/logo-simple.png" class="logo-img">
                    </router-link>
                    <inline-edit :value="page.title" @change="titleChange" />
                </div>
                <a-menu :selectable="false" theme="dark" mode="horizontal" :style="{ lineHeight: '64px' }">
                    <a-menu-item key="1">
                        <a-button type="primary">预览和设置</a-button>
                    </a-menu-item>
                    <a-menu-item key="2">
                        <a-button type="primary" @click="saveWork" :loading="saveIsLoading">保存</a-button>
                    </a-menu-item>
                    <a-menu-item key="3">
                        <a-button type="primary">发布</a-button>
                    </a-menu-item>
                    <a-menu-item key="4">
                        <user-profile :user="userInfo"></user-profile>
                    </a-menu-item>
                </a-menu>

            </a-layout-header>
        </a-layout>
        <a-layout>
            <a-layout-sider width="300" style="background: #fff">
                <div class="sidebar-container">
                    <a-tabs v-model:activeKey="activeKey">
                        <a-tab-pane key="1" tab="文本">
                            <components-list :list="defaultTextTemplates" @onItemClick="addItem" />
                        </a-tab-pane>
                        <a-tab-pane key="2" tab="图片" force-render>Content of Tab Pane 2</a-tab-pane>
                        <a-tab-pane key="3" tab="形状">Content of Tab Pane 3</a-tab-pane>
                    </a-tabs>
                </div>
            </a-layout-sider>
            <a-layout style="padding: 0 24px 24px">
                <a-layout-content class="preview-container">
                    <p>画布区域</p>
                    <history-area></history-area>
                    <div class="preview-list" id="canvas-area">
                        <div class="body-container" :style="page.props">
                            <edit-wrapper @setActive="setActive" @update-position="updatePosition"
                                v-for="component in components" :key="component.id" :id="component.id"
                                :hidden="component.isHidden" :props="component.props"
                                :active="component.id === (currentElement && currentElement.id)">
                                <component :is="component.name" v-bind="component.props" />
                            </edit-wrapper>
                        </div>
                    </div>
                </a-layout-content>
            </a-layout>
            <a-layout-sider width="300" style="background: #fff" class="settings-panel">
                <a-tabs type="card" v-model:activeKey="activePanel">
                    <a-tab-pane key="component" tab="属性设置" class="no-top-radius">
                        <div v-if="currentElement">
                            <edit-group v-if="!currentElement.isLocked" :props="currentElement.props"
                                @change="handleChange"></edit-group>
                            <div v-else>
                                <a-empty>
                                    <template #description>
                                        <p>该元素被锁定，无法编辑</p>
                                    </template>
                                </a-empty>
                            </div>
                        </div>
                        <pre>
            {{ currentElement && currentElement.props }}
          </pre>
                    </a-tab-pane>
                    <a-tab-pane key="layer" tab="图层设置">
                        <layer-list :list="components" :selectedId="currentElement && currentElement.id"
                            @change="handleChange" @select="setActive">
                        </layer-list>
                    </a-tab-pane>
                    <a-tab-pane key="page" tab="页面设置">
                        <props-table :props="page.props" @change="pageChange"></props-table>
                    </a-tab-pane>
                </a-tabs>
            </a-layout-sider>
        </a-layout>
    </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, onMounted, onUnmounted } from 'vue'
import { useStore } from 'vuex'
import { useRoute, onBeforeRouteLeave } from 'vue-router'
import { pickBy, forEach } from 'lodash-es'
import { Modal } from 'ant-design-vue'
import initHotKeys from '../plugins/hotKeys'
import initContextMenu from '../plugins/contextMenu'
import { GlobalDataProps } from '../store/index'
import ComponentsList from '../components/ComponentsList.vue'
import EditWrapper from '../components/EditWrapper.vue'
import PropsTable from '../components/PropsTable.vue'
import LayerList from '../components/LayerList.vue'
import EditGroup from '../components/EditGroup.vue'
import InlineEdit from '../components/InlineEdit.vue'
import UserProfile from '../components/UserProfile.vue'
import HistoryArea from './editor/HistoryArea.vue'
import { ComponentData } from '../store/editor'
import defaultTextTemplates from '../defaultTemplates'
import useSaveWork from '../hooks/useSaveWork'
export type TabType = 'component' | 'layer' | 'page'

export default defineComponent({
    components: {
        ComponentsList,
        EditWrapper,
        PropsTable,
        LayerList,
        EditGroup,
        HistoryArea,
        InlineEdit,
        UserProfile
    },
    setup() {
        initHotKeys()
        initContextMenu()
        const route = useRoute()
        const currentWorkId = route.params.id
        const store = useStore<GlobalDataProps>()
        const activePanel = ref<TabType>('component')
        const components = computed(() => store.state.editor.components)
        const page = computed(() => store.state.editor.page)
        const userInfo = computed(() => store.state.user)
        const currentElement = computed<ComponentData | null>(() => store.getters.getCurrentElement)
        const { saveWork, saveIsLoading } = useSaveWork()
        const activeKey = ref("1")

        onMounted(() => {
            console.log(currentWorkId)
            if (currentWorkId) {
                store.dispatch('fetchWork', { urlParams: { id: currentWorkId } })
            }
        })
        const addItem = (component: any) => {
            store.commit('addComponent', component)
        }
        const setActive = (id: string) => {
            store.commit('setActive', id)
        }
        const handleChange = (e: any) => {
            console.log('event', e)
            store.commit('updateComponent', e)
        }
        const pageChange = (e: any) => {
            console.log('page', e)
            store.commit('updatePage', e)
        }
        const titleChange = (newTitle: string) => {
            store.commit('updatePage', { key: 'title', value: newTitle, isRoot: true })
        }
        const updatePosition = (data: { left: number; top: number; id: string }) => {
            const { id } = data
            const updatedData = pickBy<number>(data, (v, k) => k !== 'id')
            const keysArr = Object.keys(updatedData)
            const valuesArr = Object.values(updatedData).map(v => v + 'px')
            store.commit('updateComponent', { key: keysArr, value: valuesArr, id })
        }

        return {
            activePanel,
            components,
            defaultTextTemplates,
            addItem,
            setActive,
            currentElement,
            handleChange,
            page,
            pageChange,
            updatePosition,
            titleChange,
            userInfo,
            saveWork,
            saveIsLoading,
            activeKey
        }
    }
})
</script>

<style>
.editor-container .preview-container {
    padding: 24px;
    margin: 0;
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.editor-container .preview-list {
    padding: 0;
    margin: 0;
    min-width: 375px;
    min-height: 200px;
    border: 1px solid #efefef;
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    margin-top: 50px;
    max-height: 80vh;
}

.page-title {
    display: flex;
}

.page-title .inline-edit span {
    font-weight: 500;
    margin-left: 10px;
    font-size: 16px;
}
</style>